<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>栅格系统</title>
	
	<link rel="stylesheet"  href="__ROOT__/static/css/bootstrap.min.css" />
	<style>
.a{
height:50px;
width:200px;
border:1px solid #ccc;
background-color:#eee;

}

.b{
height:50px;
border:1px solid #ccc;
background-color:red;

}
	</style>
	
	</head>
<body style"margin:50px;">

<div class="container a">

div容器 是固定宽度的
class="container a" 是a种样式
</div>


<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">各种色调的字体</p>

<p class="text-muted">Bootstrap 视频教程  灰</p> 
<p class="text-primary">Bootstrap 视频教程  text-primary 蓝</p>
 <p class="text-success">Bootstrap 视频教程 text-success 绿</p> 
 <p class="text-info">Bootstrap 视频教程 text-info 蓝</p>

<p class="text-warning">Bootstrap 视频教程 text-warning 黄</p>
 <p class="text-danger">Bootstrap 视频教程</p>
 
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">各种色调的背景</p>

<p class="bg-muted">Bootstrap 视频教程  灰</p> 
<p class="bg-primary">Bootstrap 视频教程  text-primary 蓝</p>
 <p class="bg-success">Bootstrap 视频教程 text-success 绿</p> 
 <p class="bg-info">Bootstrap 视频教程 text-info 蓝</p>

<p class="bg-warning">Bootstrap 视频教程 text-warning 黄</p>
 <p class="bg-danger">Bootstrap 视频教程</p>
 
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">关闭按钮</p>
<button type="button" class="close">&times;关闭按钮在这里</button>

 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">三角符号</p>

三角符号 符号之前<span class="caret">三角符号</span>《在符号之后三角符号
<br/><br/><br/><br/><br/>
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">div 浮动</p>
<div class="pull-left a">左边</div> 
<div class="pull-right b">右边</div>
<br/><br/><br/><br/><br/>
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">块级居中</p>

<div class="center-block a">居中</div>

注：就是 margin:x auto；并且设置了 display:block;。

<br/><br/><br/><br/><br/>
 <hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">清除浮动</p>

<div class="pull-left a">左边</div> 
<div class="a">不显示a 的样式，是因为不清除幅动，使样式重叠在上面</div>

<br/><br/><br/><br/>下面加入清除浮动<br/>
<div class="pull-left a">左边</div> 
<div class="clearfix"></div>
<div class="a">不显示a 的样式，是因为不清除幅动，使样式重叠在上面</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">显示和隐藏</p>

<div class="show">show</div>
下面有一个隐藏的div

<div class="hidden">hidden</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">超小屏幕激活显示</p>
visible 可见  xs 超小  block 块级显示 拉小屏幕才可见
<div class="visible-xs-block a">Bootstrap</div>

inline 内联显示   如果是内联显示，加长度宽度 是没有用处的
<div class="visible-xs-inline a">Bootstrap</div>

<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
<p style="text-align:center">超小屏幕时隐藏</p>

<div class="hidden-xs a">Bootstrap</div>






<script src="__ROOT__/static/js/jquery.min.js"></script>
<script src="__ROOT__/static/js/bootstrap.min.js"></script>

</body>
</html>